<template>
  <tl-sub-page :render="render" :visible.sync="visible" v-dialogDrag :title="'鱼骨图'" :close-on-click-modal="false" class="tl-dialog" append-to-body width="1200px" @open="open" @close="close">
    <div class="tooltip1">
      <el-tooltip placement="top" style="font-size:20px; margin-top:4px">
        <div slot="content" class="content">
          1、越靠近靶心的部门对中标影响越大；<br />
          2、每个分支上越靠近中线的职务对中标影响越大。
        </div>
        <i class="el-icon-question" />
      </el-tooltip>
    </div>
    <div v-for="(deptItem, index) in deptList" :key="index">
      <el-row>
        <dept-form :ref="'dept' + index" :fatherIndex="index" :model="deptItem" @dataChange="handleDataChange" @deleteDept="handleDeleteDept"></dept-form>
      </el-row>
    </div>
    <el-row class="button-row">
      <el-button type="text" icon="el-icon-circle-plus-outline" @click="addDept" style="margin-left: 40px">新增部门</el-button>
      <el-button type="primary" style="float: right" @click="doSubmit" :loading="saveLoading"> <svg-icon icon-class="save" />保存</el-button>
    </el-row>
    <fish-bone ref="fishBone" v-if="showFish" :key="'index' + fishKey" :model="model"></fish-bone>
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
import { validateNull } from '@tapui/utils/validate'
/** 子组件 */
// import tlEdit from './edit'
import fishBone from '@/components/fishBone/fishBone.vue'
import deptForm from './DeptForm.vue'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
  name: 'mpmProjectFishBone',
  mixins: [mixin_list],
  components: { fishBone, deptForm },
  data() {
    return {
      deptList: [{ clientdept: '', children: [{ post: '' }] }],
      description: '销售项目鱼骨图-列表查询',
      urlPrefix: '/mpm/projectFishFirst/',
      url: {
        doSaveFish: '/mpm/projectFishFirst/insertFishInfo',
        queryFishBone: '/mpm/projectFishFirst/queryFishInfo'
        // queryCodeList: '/mpm/projectSquared/dataCodeList'
      },
      // 排序参数
      sorterInfo: {
        sidx: 'sortcode',
        sord: 'asc'
      },
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 1000, // 每页记录数
        pageSizes: ['10', '50', '100'],
        totalCount: 0 // 总数
      },
      isQueryOnCreated: false,
      visible: false,
      fishBoneData: {},
      fishKey: 0,
      showFish: false,
      saveLoading: false
    }
  },
  props: {
    model: {
      default: function() {
        return {}
      },
      type: Object
    },
    render: {
      default: 'el-dialog',
      type: String
    }
  },
  methods: {
    close() {
      this.showFish = false
    },
    open() {
      this.showFish = false
      this.queryFishBone()
    },
    addDept() {
      this.deptList.push({ clientdept: '', children: [{ post: '' }] })
    },
    doSubmit() {
      let length = this.deptList.length
      if (length < 1) {
        this.$tap.alert('请至少填一个部门!', 'warning')
        return
      }
      // 子表单校验
      let validateAll = true
      for (let i = 0; i < length; i++) {
        // 校验子组件必填
        let validateItem = this.$refs['dept' + i][0].$refs.form.validate((valid) => {
          if (!valid) {
            validateAll = false
          }
        })
      }
      if (!validateAll) {
        this.$tap.alert('请填写完整信息!', 'warning')
        return
      }
      this.saveLoading = true
      postAction(this.url.doSaveFish, { fishbone: this.deptList, taskid: this.model.id }).then((res) => {
        if (res.success) {
          this.$tap.message('提交成功!', 'success')
          this.saveLoading = false
          this.queryFishBone()
        } else {
          this.$tap.alert('提交失败，请联系管理员！', 'warning')
          this.saveLoading = false
        }
      })
    },
    initUseDefaultData() {
      // 使用示例数据初始化
      let exampleData = [
        {
          description: null,
          createuser: null,
          clientdept: '部门1',
          enabled: 1,
          modifiedon: null,
          modifieduser: null,
          children: [
            {
              fid: 21051800000001,
              description: null,
              createuser: null,
              enabled: 1,
              modifiedon: null,
              modifieduser: null,
              post: '职务1',
              createorgid: null,
              dispenabled: '是',
              createon: null,
              id: 21051800000001,
              taskid: 21051800000035,
              sortcode: 0
            },
            {
              fid: 21051800000001,
              description: null,
              createuser: null,
              enabled: 1,
              modifiedon: null,
              modifieduser: null,
              post: '职务2',
              createorgid: null,
              dispenabled: '是',
              createon: null,
              id: 21051800000003,
              taskid: 21051800000035,
              sortcode: 0
            }
          ],
          createorgid: null,
          dispenabled: '是',
          createon: null,
          id: 21051800000001,
          taskid: 21051800000035,
          sortcode: 0
        },
        {
          description: null,
          createuser: null,
          clientdept: '部门2',
          enabled: 1,
          modifiedon: null,
          modifieduser: null,
          children: [
            {
              fid: 21051800000002,
              description: null,
              createuser: null,
              enabled: 1,
              modifiedon: null,
              modifieduser: null,
              post: '职务1',
              createorgid: null,
              dispenabled: '是',
              createon: null,
              id: 21051800000002,
              taskid: 21051800000035,
              sortcode: 0
            }
          ],
          createorgid: null,
          dispenabled: '是',
          createon: null,
          id: 21051800000002,
          taskid: 21051800000035,
          sortcode: 0
        }
      ]
      this.fishBoneData = this.fishAdapter(exampleData)
      this.fishKey = this.fishKey + 1
      this.showFish = true
      this.$nextTick(() => {
        this.$refs.fishBone.initFishBone(this.fishBoneData)
      })
    },
    // 查询并初始化
    queryFishBone() {
      // 初始化子组件
      this.dataToEdit([{ clientdept: '', children: [{ post: '' }] }])
      if (!this.model.id) {
        this.initUseDefaultData()
        return false
      }
      getAction(this.url.queryFishBone, { taskid: this.model.id }).then((res) => {
        if (res.success) {
          if (res.result.fishbone && res.result.fishbone.length > 0) {
            this.dataToEdit(res.result.fishbone)
            this.fishBoneData = this.fishAdapter(res.result.fishbone)
            this.fishKey = this.fishKey + 1
            this.showFish = true
            this.$nextTick(() => {
              this.$refs.fishBone.initFishBone(this.fishBoneData)
            })
          } else {
            this.initUseDefaultData()
          }
        } else {
          this.$tap.alert('鱼骨图数据查询失败，请联系管理员!', 'warning')
        }
      })
    },
    // 编辑界面回显
    dataToEdit(resData) {
      this.deptList = resData
      this.$nextTick(() => {
        let length = this.deptList.length
        for (let i = 0; i < length; i++) {
          // 子组件初始化数据
          this.$refs['dept' + i][0].initDeptForm()
        }
      })
    },
    // 数据同步
    handleDataChange(index, newData) {
      this.deptList[index] = newData
    },
    // 数据删除
    handleDeleteDept(index) {
      this.$tap.confirm('确定删除部门信息吗？').then((_) => {
        this.deptList.splice(index, 1)
        this.$nextTick(() => {
          let length = this.deptList.length
          for (let i = 0; i < length; i++) {
            // 子组件初始化数据
            this.$refs['dept' + i][0].initDeptForm()
          }
        })
      })
    },
    // 组件数据适配
    fishAdapter(data) {
      if (!data) {
        return
      }
      // 二级数据适配
      for (let item of data) {
        item.fontColor = ''
        item.lineColor = ''
        item.link = ''
        item.fid = '1'
        item.name = item.clientdept
        if (item.children) {
          // 三级适配
          for (let itemSon of item.children) {
            itemSon.fontColor = ''
            itemSon.lineColor = ''
            itemSon.link = ''
            itemSon.children = []
            itemSon.name = itemSon.post
            itemSon.id = itemSon.id + 'a'
          }
        }
      }
      let newData = [
        {
          children: data,
          id: '1',
          fid: '0',
          name: '任务目标',
          fontColor: '',
          lineColor: '',
          link: ''
        }
      ]
      return newData
    }
  }
}
</script>

<style scoped>
.tooltip1 {
  position: absolute;
  top: 13px;
  left: 64px;
}
.fishDialog {
  position: relative;
}
.button-row {
  margin-top: 5px;
}
</style>
